<template>
  <div>
    <h4>侦听器</h4>
    <p>{{ msg }} <input type="text" v-model="msg[0].age"></p>
    <p>{{ n }} <input type="text" v-model="n.num"><input type="button" value="停止watch" @click="wStop"></p>
    <p ref="myP">{{ title }} <input type="text" v-model="title"></p>
    <p><input type="button" value="停止we" @click="weStop"></p>
  </div>
</template>

<script setup>
import { reactive, ref, watch, watchEffect } from "vue";


const msg = reactive([{age:20}]);
// 默认深层次侦听
watch(msg, (newVal, oldVal)=>{
  console.log("修改之前：", newVal)
  console.log("修改之后：", oldVal)
},{
  immediate: true
});


const n = ref({num:20});
// 浅层次的侦听：侦听的数据是一个getter函数形式
const wStop = watch(()=>n.value, (newVal, oldVal)=>{
  console.log("修改之前：", newVal)
  console.log("修改之后：", oldVal)
},{
  // 开启深度侦听
  deep:true
});

// 因为setup的执行时机在beforeCreate之前
// 所有无法直接获取DOM元素
// 提前定义响应式数据，用于获取元素
const myP = ref(null);

const title = ref("hello watch");

watch(title, (newVal, oldVal)=>{
  // console.log( newVal, oldVal )
  console.log( myP.value.innerHTML );
},{
  // 表示在DOM更新后触发侦听器
  flush: "post"
})


// 立即执行的侦听器
const weStop = watchEffect(()=>{
  console.log("-----");
  console.log(msg[0].age);
  console.log(title.value);
  console.log(n.value);
})




</script>